<template>
  <div class="b-c-page">
    <transition name="el-zoom-in-top">
      <el-form v-show="searchBlogVisible" inline :model="searchCBlogFrom" ref="searchCBlogFrom" @keyup.enter.native="searchBlogHandle()">
        <el-form-item prop="word" label="菜单名称">
          <el-input v-model="searchCBlogFrom.word" @clear="getBlogList" placeholder="请输入博客标题或博客前言" clearable></el-input>
        </el-form-item>
        <el-form-item prop="label" label="博客标签">
          <el-select v-model="searchCBlogFrom.label" @clear="getBlogList" clearable placeholder="请选择博客标签" class="label-select">
            <el-option label="原创" value="0"></el-option>
            <el-option label="转载" value="1"></el-option>
            <el-option label="翻译" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="dataLoad" @click="searchBlogHandle" type="primary" icon="el-icon-search">查询</el-button>
          <el-button :disabled="dataLoad" @click="resetBlogCPageHandle"
                     plain icon="el-icon-refresh-right"
                     class="reset-menu">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>

    <div class="b-c-tool">
      <el-radio-group v-model="searchCBlogFrom.status" :disabled="dataLoad" @change="blogStatusChangeHandle" size="mini">
        <el-radio-button :label="1">审核</el-radio-button>
        <el-radio-button :label="2">下架</el-radio-button>
        <el-radio-button :label="3">发布</el-radio-button>
      </el-radio-group>

      <right-tool-bar :search-visible="searchBlogVisible"
                      @toggle-search="toggleSearch" @refresh-table="getBlogList" />
    </div>

    <el-table
      v-loading="dataLoad"
      :data="blogList"
      :default-sort = "{ prop: searchCBlogFrom.field, order: searchCBlogFrom.order}"
      @sort-change="sortChangeHandle"
      ref="blogMTable"
    >
      <el-table-column prop="title" header-align="center" align="center" label="标题"></el-table-column>
      <el-table-column prop="firstPicture" header-align="center" align="center" label="首图">
        <template v-slot="scope">
          <img :src="scope.row.firstPicture" alt="没有找到图片" class="first-picture">
        </template>
      </el-table-column>
      <el-table-column prop="label" header-align="center" align="center" label="标记">
        <template v-slot="scope">
          {{ scope.row.label === 0 ? '原创' : scope.row.label === 1 ? '转载' : '翻译' }}
        </template>
      </el-table-column>
      <el-table-column v-if="searchCBlogFrom.status === 3" sortable prop="likeNum" header-align="center" align="center" label="点赞数"></el-table-column>
      <el-table-column v-if="searchCBlogFrom.status === 3" sortable prop="commentNum" header-align="center" align="center" label="评论数"></el-table-column>
      <el-table-column v-if="searchCBlogFrom.status === 3" sortable prop="viewNum" header-align="center" align="center" label="浏览数"></el-table-column>
      <el-table-column v-if="searchCBlogFrom.status === 3" sortable prop="collectNum" header-align="center" align="center" label="收藏数"></el-table-column>
      <el-table-column v-if="searchCBlogFrom.status === 3" prop="isHot" header-align="center" align="center" label="热门">
        <template v-slot="scope">
          <el-tag v-if="scope.row.isHot === 0" type="success">
            热门
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="searchCBlogFrom.status === 3" prop="isElite" header-align="center" align="center" label="推荐">
        <template v-slot="scope">
          <el-tag v-if="scope.row.isElite === 0" class="c-recommend">
            推荐
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="showStatement" header-align="center" align="center" label="版权">
        <template v-slot="scope">
          <el-tag type="info" :class="'c-statement' + scope.row.showStatement">
            {{ scope.row.showStatement === 0 ? '开启' : '关闭' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="openComment" header-align="center" align="center" label="评论">
        <template v-slot="scope">
          <el-tag type="info" :class="'c-comment' + scope.row.openComment">
            {{ scope.row.openComment === 0 ? '开启' : '关闭' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="createTime" header-align="center" align="center" label="创建时间" width="100"></el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="openBContentDialogHandle(scope.row.blogId)">正文</el-button>
          <el-button v-if="searchCBlogFrom.status === 1" type="text" @click="passAuditBlogHandle(scope.row)">通过</el-button>
          <el-button v-if="searchCBlogFrom.status === 1" type="text" @click="openRejectBlogDialogHandle(scope.row)">拒绝</el-button>
          <el-button v-if="searchCBlogFrom.status === 2" type="text" @click="putBlogHandle(scope.row)">重新上架</el-button>
          <el-button v-if="searchCBlogFrom.status === 3 && scope.row.isElite === 1" type="text" @click="recommendBlogHandle(scope.row)">推荐</el-button>
          <el-button v-if="searchCBlogFrom.status === 3 && scope.row.isElite === 0" type="text" @click="cancelRecommendBlogHandle(scope.row)">取消推荐</el-button>
          <el-button v-if="searchCBlogFrom.status === 3" type="text" @click="openOutBlogDialogHandle(scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格分页插件 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalNum"
      :disabled="dataLoad"
      layout="total, sizes, prev, pager, next, jumper"
      class="paging">
    </el-pagination>

    <!-- 博客正文弹出框 -->
    <blog-content :dialog-visible="bContentDialog" ref="bContentDialog"
                  @close-b-content-dialog="closeBContentDialogHandle" />

    <!-- 下架博客弹出框 -->
    <out-blog :dialog-visible="outBlogDialog" ref="outBlogDialog"
              @close-out-blog-dialog="closeOutBlogDialogHandle" />

    <!-- 审核拒绝博客弹出框 -->
    <reject-blog :dialog-visible="rejectBlogDialog" ref="rejectBlogDialog"
                 @close-reject-blog-dialog="closeRejectBlogDialogHandle" />
  </div>
</template>

<script>
  import RightToolBar from '@/components/common/right-toolbar'
  import BlogContent from "@/components/blog/content";
  import OutBlog from "@/components/blog/out";
  import RejectBlog from "@/components/blog/reject";

  export default {
    layout: 'admin',
    name: "admin-blog-check",
    components: { RejectBlog, RightToolBar, BlogContent, OutBlog },
    data() {
      return {
        // 博客数据列表
        blogList: [],
        // 数据是否加载[false-不加载 true-加载]
        dataLoad: false,
        // 博客检索是否显示
        searchBlogVisible: true,
        // 博客管理检索表单对象
        searchCBlogFrom: {
          word: '',             // 博客标题或者博客前言
          label: '',            // 博客标记
          status: 1,            // 博客状态[1-审核 2-下架 3-发布]
          field: 'createTime',  // 排序字段
          order: 'ascending'    // 排序方式
        },
        // 当前展示页码
        pageIndex: 1,
        // 当前页显示个数
        pageSize: 10,
        // 当前博客数量
        totalNum: 0,
        // 博客正文弹出框是否显示
        bContentDialog: false,
        // 下架博客弹出框是否显示
        outBlogDialog: false,
        // 博客审核拒绝弹出框是否显示
        rejectBlogDialog: false,
      }
    },
    asyncData({ app, params, query}) {
      // return app.$axios.$post('/blog/blog/manage/list', { status: 1, page: 1, limit: 10, field: 'updateTime', order: 'ascending' })
      //   .then(data => {
      //     return {
      //       blogList: data.page.list,
      //       totalNum: data.page.totalNum,
      //       blogStatus: params.status || 0
      //     }
      //   })
      return {
        searchCBlogFrom: {
          // 博客标题或者博客前言
          word: '',
          // 博客标记
          label: '',
          status: params.status || 1,
          field: 'createTime',
          order: 'ascending'
        }
      }
    },
    created() {
      if(process.client) {
        this.getBlogList()
      }
    },
    methods: {
      // 用户检索事件
      searchBlogHandle() {
        if (this.searchCBlogFrom.word === '' && this.searchCBlogFrom.label === '') {
          this.notify('info', "提示", '检索条件为空')
          return
        }
        // 查询页码恢复第一页
        this.pageIndex = 1

        this.getBlogList()
      },
      // 用户检索 显示/隐藏 事件
      toggleSearch() {
        this.searchBlogVisible = !this.searchBlogVisible
      },
      // 获取可以被管理的博客列表事件
      getBlogList() {
        let obj = {
          word: this.searchCBlogFrom.word,
          label: this.searchCBlogFrom.label,
          status: this.searchCBlogFrom.status,
          page: this.pageIndex,
          limit: this.pageSize,
          field: this.searchCBlogFrom.field,
          order: this.searchCBlogFrom.order
        }
        // 表格数据加载
        this.dataLoad = true
        this.$axios.$post('/blog/manage/list', obj)
          .then(({data:page}) => {
            this.blogList = page.list
            this.totalNum = page.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 表格加载结束
            this.dataLoad = false
          })
      },
      // 显示博客数据类型切换事件
      blogStatusChangeHandle(value) {
        this.searchCBlogFrom.status = value
        // 查询页码恢复第一页
        this.pageIndex = 1

        this.getBlogList()
      },
      // 每页显示个数变化事件
      sizeChangeHandle(size) {
        this.pageIndex = 1
        this.pageSize = size
        this.getBlogList()
      },
      // '点击特定页码'、'上一页'、'下一页'操作事件
      currentChangeHandle(index) {
        if (this.pageIndex === index) {
          return
        }
        this.pageIndex = index
        this.getBlogList()
      },
      // 表格选择字段排序事件
      sortChangeHandle( { prop, order } ) {

        if (!order) {   // 第三次点击同一个排序字段，恢复默认排序
          this.searchCBlogFrom.field = 'createTime'
          this.searchCBlogFrom.order = 'ascending' // descending
        } else {
          this.searchCBlogFrom.field = prop
          this.searchCBlogFrom.order = order
        }

        this.getBlogList()
      },
      // 打开博客正文弹出框事件
      openBContentDialogHandle(blogId) {
        this.bContentDialog = true

        this.$nextTick(() => {
          this.$refs.bContentDialog.initBlogContent(blogId)
        })
      },
      // 关闭博客正文弹出框事件
      closeBContentDialogHandle() {
        this.bContentDialog = false
      },
      // 管理员通过博客审核，发布博客
      passAuditBlogHandle(blog) {
        this.$confirm(`确定要通过'${blog.title}'博客吗?`, '通过确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          // 表格数据加载
          this.dataLoad = true
          let obj = {
            // 博客id
            blogId: blog.blogId,
            // 审核状态[true-通过 false-拒绝]
            status: true
          }
          this.$axios.$post('/blog-manage/audit/result', obj)
            .then(() => {
              this.notify('success', '审核成功', '博客审核通过操作成功，博客发布到系统中!')

              this.getBlogList()
            })
            .catch(err => {
              if (err.code === 409) {
                this.getBlogList()
              }
            })
            .finally(() => {
              // 表格加载结束
              this.dataLoad = false
            })
        }).catch(() => {})
      },
      // 打开博客审核拒绝弹出框事件
      openRejectBlogDialogHandle(blog) {
        this.rejectBlogDialog = true;

        this.$nextTick(() => {
          this.$refs.rejectBlogDialog.initBlog(blog)
        })
      },
      // 关闭博客审核拒绝弹出框事件
      closeRejectBlogDialogHandle(bool) {
        this.rejectBlogDialog = false

        if (bool) {
          this.getBlogList()
        }
      },
      // 推荐博客事件
      recommendBlogHandle(blog) {
        this.$confirm(`您确定要推荐'${blog.title}'博客吗?`, '推荐确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          // 表格数据加载
          this.dataLoad = true

          this.$axios.$get('/blog-manage/recommend/blog', { params: { blogId: blog.blogId } })
            .then(() => {
              this.notify('success', '推荐博客成功', `'${blog.title}'博客推荐成功`)

              this.getBlogList()
            })
            .catch(err => {
              if (err.code === 409) {
                this.getBlogList()
              }
            })
            .finally(() => {
              // 表格加载结束
              this.dataLoad = false
            })
        }).catch(() => {})
      },
      // 取消博客推荐事件
      cancelRecommendBlogHandle(blog) {
        this.$confirm(`您确定要取消推荐'${blog.title}'博客吗?`, '取消确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          // 表格数据加载
          this.dataLoad = true

          this.$axios.$get('/blog-manage/cancel/recommend/blog', { params: { blogId: blog.blogId } })
            .then(() => {
              this.notify('success', '取消推荐成功', `'${blog.title}'博客取消推荐成功`)

              this.getBlogList()
            })
            .catch(err => {
              if (err.code === 409) {
                this.getBlogList()
              }
            })
            .finally(() => {
              // 表格加载结束
              this.dataLoad = false
            })

        }).catch(() => {})
      },
      // 打开下架博客弹出框事件
      openOutBlogDialogHandle(blog) {
        this.outBlogDialog = true;

        this.$nextTick(() => {
          this.$refs.outBlogDialog.initBlog(blog)
        })
      },
      // 关闭下架博客弹出框事件
      closeOutBlogDialogHandle(bool) {
        this.outBlogDialog = false

        if (bool) {
          this.getBlogList()
        }
      },
      // 重新上架博客事件
      putBlogHandle(blog) {
        this.$confirm(`您确定要重新上架'${blog.title}'博客吗?`, '上架确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 表格数据加载
          this.dataLoad = true

          this.$axios.$get('/blog-manage/put/blog', { params: { blogId: blog.blogId }})
            .then(() => {
              this.notify('success', '上架成功', `重新上架'${blog.title}'博客成功`)

              this.getBlogList()
            })
            .catch(err => {
              if (err.code === 409) {
                this.getBlogList()
              }
            })
            .finally(() => {
              // 表格加载结束
              this.dataLoad = false
            })
        }).catch(() => {})
      },
      // 重置页面事件
      resetBlogCPageHandle() {
        if (this.searchCBlogFrom.word === '' && this.searchCBlogFrom.label === ''
          && this.pageIndex === 1 && this.pageSize === 10) {
          this.notify('info', "提示", '检索条件为空')
          return
        }
        // 重置博客查询表单
        this.$refs['searchCBlogFrom'].resetFields()
        this.pageIndex = 1
        this.pageSize = 10
        // console.log("表单对象: ", this.searchCBlogFrom)

        this.getBlogList()
      },

    }
  }
</script>

<!--
  css字符对应
  b -> blog
  c -> check
-->
<style scoped>
  .b-c-page .label-select {
    width: 140px;
  }
  .b-c-page .b-c-tool {
    margin-bottom: 7px;
  }
  .b-c-page .paging {
    float: right;
    margin: 7px;
  }
  .b-c-page .first-picture {
    width: 50px;
    height: 40px;
    line-height: 45px;
  }
  .b-c-page .c-statement0 {
    color: #699217;
  }
  .b-c-page .c-statement1 {
    color: #f14b4b;
  }
  .b-c-page .c-recommend {
    color: #ec5d0e;
  }
  .b-c-page .c-comment0 {
    color: #6CBCBC;
  }
  .b-c-page .c-comment1 {
    color: #cba457;
  }
</style>
